<template>
  <div>
    <el-row>
          <el-col :span="18">
            <select-client-id ref="selectClientId" v-model="dataForm.tenantCode" :isChangeClient="true"
                              :width="100"
                              @changeClient="clientChange"
                              :isShowCreate="true"></select-client-id>
          </el-col>
          <el-col :span="6">
            <div v-loading='datasetLayerSelectLoading'>
                <el-select v-model="datasetLayerId"
                           @change="onLayerChange"
                           placeholder="Please Select Layer"
                           clearable
                           style="height:30px;">
                  <el-option v-for="(item,index) in layerTempList"
                             :label="item.name"
                             :key="index"
                             :value="item.id">
                  </el-option>
                </el-select>
              </div>
          </el-col>
        </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataForm: {
        tenantCode: '',
        tenantName: '',
        website: ''
      },
      datasetLayerSelectLoading: false,
      datasetLayerId: null,
      layerTempList: []
    }
  },
  created () {
    this.getLayerList()
  },
  methods: {
    getTenantCode () {
      return this.dataForm.tenantCode
    },
    clientChange (data) {
      if (data) {
        this.dataListLoading = true
        this.dataForm.tenantName = data.tenantName
        this.dataForm.tenantCode = data.tenantCode
        this.dataForm.website = data.website
        this.$nextTick(() => {
          this.getRoleList(data)
          this.getUserList(data)
        })
      } else {
        this.roleListData = []
        this.userListData = []
        this.dataForm = {
          tenantCode: '',
          tenantName: '',
          website: ''
        }
      }
    },
    onLayerChange (datasetLayerId) {
      sessionStorage.setItem('clientLayerId', datasetLayerId)
      if (this.$refs.selectClientId) {
        this.$refs.selectClientId.getClientList(datasetLayerId)
      }
    },
    getLayerList () {
      this.datasetLayerSelectLoading = true
      var params = {
        datasetKey: 'sys_tenant_list'
      }
      this.$interface.reports.getDatasetLayerList(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.layerTempList = res.data
        this.datasetLayerId = res.data[0].id
        if (sessionStorage.getItem('clientLayerId')) {
          this.datasetLayerId = sessionStorage.getItem('clientLayerId')
        }
        if (this.$refs.selectClientId) {
          this.$refs.selectClientId.getClientList(this.datasetLayerId)
        }
        this.datasetLayerSelectLoading = false
      }).catch(() => { this.datasetLayerSelectLoading = false })
    },
    changeLayerStatus () {
      this.useLayerStatus = !this.useLayerStatus
    }
  }
}
</script>
